<template>
    <div>
        <div class="payTabsBox">
            <p>套餐选择<span>仅有软件使用时间</span></p>
            <div class="TabsCont flex flex-align-center">
                <div class="TabsCont-item" v-for='(item,index) in DataList' :key='index' @click="onChangeTabs(index)">
                    <img :src="item.status == 1?activeUrl:activeUrlNo" alt="">
                    <p class="Num">{{item.money}}元</p>
                    <p class="tips">({{item.content}})</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
const activeUrl = 'static/img/user-center/pay-active.png'
const activeUrlNo = 'static/img/user-center/pay-noactive.png'
export default {
    props: {

    },
    data () {
        return {
            activeUrl:activeUrl,
            activeUrlNo:activeUrlNo,
            DataList:[],
            res:{}
        }
    },
    mounted () {
        this.getObtainPackageList();
    },
    methods: {
        onChangeTabs(index){ //会员充值切换
               this.DataList.forEach((elem, i) => {
                if (i == index) {
                elem.status = 1;
                this.res = {
                    package_id:elem.id,
                    package_title:elem.title,
                    money:elem.money
                }
                 this.$emit('setorder',this.res);
                } else {
                elem.status = 0;
                }
            });
        },
        getObtainPackageList(){
            let uid = this.$store.state.userInfo.id;
            this.https('recharge/getObtainPackageList',{type:0,uid:uid})
            .then(data => {
                for(var i in data){
                    data[i].status = 0;
                }
                data[0].status = 1;
                this.res = {
                    package_id:data[0].id,
                    package_title:data[0].title,
                    money:data[0].money
                }
                this.DataList = data;
                this.$emit('setorder',this.res);
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../../assets/css/usercenter/memberpaytabs.less);
</style>


